<template>
    <div class="welcome">
        <a-row>

            <a-col :span="8" style="position: relative;">
                <div style="width: 400px;height:400px;text-align: center;position: relative;top: 80px;left: 20px;">
                    <img :src="computer" style="width: 100%;height: 100%;">
                </div>
            </a-col>
            <a-col :span="16" >
                <div class="text">
                    <span class="into">欢迎进入</span>
                    <p class="p1">Welcome to ······</p>
                    <p class="p2">网站后台管理系统</p>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        name: "Welcome",
        data() {
            return {
                computer: require("../../assets/wel_bg.png")
            }
        }
    }
</script>

<style scoped lang="less">
    .welcome {
        user-select: none;
        font-size: 12px;
        height: 100vh;
        background-color: #ffffff;
        position: relative;

        .into {
            color: #ffffff;
            background-color: #f50;
            border-radius: 8px;
            padding: 5px;
            margin: 0 0 0 35px;
            letter-spacing: 4px;
            font-size: 14px;
            font-weight: bold;
        }

        .text {
            margin: 230px 0;
            padding: 15px 0;
            background-image: linear-gradient(to right, rgba(90, 174, 255, 0.82), rgba(90,174, 255, 0.55), rgba(116, 219, 255, 0));

            p{
                margin: 0;
                padding: 0 0 0 100px ;
            }
            .p1{
                padding-top: 5px;
                font-size: 16px;
                font-weight: bold;
                color: #848484;
                margin-top: 5px;
            }
            .p2 {
                padding: 0 0 0 100px ;
                font-size: 36px;
                letter-spacing: 12px;
                color: #1890ff;
                font-weight: bold;

            }
        }
    }
</style>